<template>
  <el-menu :default-active="defaultActive" router mode="horizontal" class="el-menu-demo" :ellipsis="false">
    <el-menu-item index="/monitor/singleStationMonitoring/index">首页</el-menu-item>
    <el-menu-item index="/monitor/singleStationMonitoring/wiringDiagram">主接线图</el-menu-item>
    <el-menu-item index="/monitor/singleStationMonitoring/equipmentMonitoring">设备监控</el-menu-item>
    <el-menu-item index="/monitor/singleStationMonitoring/faultAlarm">故障警告</el-menu-item>
  </el-menu>
</template>

<script lang="ts" setup>
import router from '@/router';
import { ref, watch } from 'vue'

const defaultActive = ref('/monitor/singleStationMonitoring/index')

// 检查当前路径并设置正确的活动菜单项
const checkActivePath = (path: string) => {
  // 菜单项路径数组
  const menuPaths = [
    '/monitor/singleStationMonitoring/index',
    '/monitor/singleStationMonitoring/wiringDiagram',
    '/monitor/singleStationMonitoring/equipmentMonitoring',
    '/monitor/singleStationMonitoring/faultAlarm'
  ]
  
  // 默认选择首页
  let activePath = menuPaths[0]
  
  // 检查当前路径是否以某个菜单路径开头
  for (const menuPath of menuPaths) {
    if (path.startsWith(menuPath)) {
      activePath = menuPath
      break
    }
  }
  
  return activePath
}

// 初始化默认活动菜单
defaultActive.value = checkActivePath(router.currentRoute.value.path)

// 监听路由变化
watch(
  () => router.currentRoute.value.path,
  (newPath) => {
    defaultActive.value = checkActivePath(newPath)
  }
)
</script>

<style lang="scss" scoped>
.el-menu {
  height: 100%;
  background: #011532;
  border: none;

  .el-menu-item {
    color: #fff;
    border-radius: 4px;
    font-size: 16px;
  }

  .el-menu-item:hover {
    background: #024095;
    color: #fff !important;
  }

  .el-menu-item.is-active {
    background: #024095;
    color: #fff !important;
  }
}
</style>